<script setup lang="ts">
import { useRouter } from "vue-router";
import { onMounted, onUnmounted, watchEffect, ref, reactive } from "vue";
import Lottie from "lottie-web";
import loginAniData from "@/assets/json/login.json";
import { userStore } from "@/stores/userStore";
import { useRequest } from "vue-request";
import { showToast } from "@nutui/nutui";
import '@nutui/nutui/dist/packages/toast/style';

type ModelType = {
  username: string,
  password: string,
  code: string,
}

const router = useRouter();
const store = userStore();

const imgRef = ref<HTMLDivElement>();
const startAnimation = () => {
  Lottie.loadAnimation({
    container: imgRef.value!,
    renderer: "svg",
    loop: true,
    autoplay: true,
    animationData: loginAniData
  });
};

onMounted(() => {
  startAnimation();
});

onUnmounted(() => {
  Lottie.destroy();
});

const handleStart = () => {
  router.push({ name: "home" });
};

const formRef = ref();

const formData = ref<ModelType>({
  username: "",
  password: "",
  code: ""
});

const validate = (item: any) => {
  console.log(item);
};

const rules = {
  username: [
    {
      required: true,
      message: "请输入用户名",
      trigger: "blur"
    }
  ],
  password: [
    {
      required: true,
      message: "请输入密码",
      trigger: "blur"
    }
  ],
  code: [
    {
      required: true,
      message: "请输入验证码",
      trigger: "blur"
    }
  ]
};

const { data, loading, run: login, error } = useRequest(store.login, {
  debounceOptions: {
    maxWait: 500,
    leading: true,
    trailing: false
  }, manual: true
});

watchEffect(() => {
  console.log("loading", loading.value);
  if (!loading.value) {
    if (data.value?.code === 0) {
      showToast.text("登录成功");
    }
  }
});

const submit = () => {
  formRef.value.validate().then(async ({ valid, errors }: any) => {
    if (valid) {
      await login(formRef.value);
      console.log("login res", data.value);
    } else {
      showToast.text(errors[0].message || "请检查输入");
    }
  });
};
const reset = () => {
  formRef.value.reset();
  formData.value = {
    username: "",
    password: "",
    code: ""
  };
};

</script>

<template>
  <div class="login">
    <h1>登录</h1>

    <div ref="imgRef" class="img" />

    <p>欢迎登录</p>

    <nut-form :model-value="formData" :rules="rules" ref="formRef">
      <nut-form-item label="用户名" prop="username" required :show-error-message="false">
        <nut-input class="nut-input-text" v-model="formData.username" placeholder="请输入用户名" type="text" />
      </nut-form-item>
      <nut-form-item label="密码" prop="password" required :show-error-message="false">
        <nut-input class="nut-input-text" v-model="formData.password" placeholder="请输入密码" type="text" />
      </nut-form-item>
    </nut-form>

    <nut-button type="primary" class="login-btn" @click="submit" :loading="loading">提交</nut-button>
    <nut-button @click="reset" class="reset-btn">重置</nut-button>
  </div>
</template>

<style lang="scss" scoped>
.login {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;

  h1 {
    font-size: 24px;
    font-weight: bold;
    margin: 40px 0;
  }

  .img {
    height: 25vh;
  }

  p {
    font-size: 22px;
    font-weight: bold;
    margin: 16px 0;
  }

  .login-form {
    width: 80%;
  }

  .reset-btn {
    width: 250px;
    height: 60px;
  }

  .login-btn {
    color: #fff;
    width: 250px;
    height: 60px;
    font-size: 22px;
    border-radius: 30px;
    margin: 30px 0;
    padding: 10px 25px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: inset 2px 2px 2px 0 rgba(255, 255, 255, .5),
    7px 7px 20px 0 rgba(0, 0, 0, .1),
    4px 4px 5px 0 rgba(0, 0, 0, .1);
    outline: none;
    border: none;
    background: rgb(251, 33, 117);
    background: linear-gradient(to left, rgba(251, 33, 117, 1) 0%, #EF5350 100%);
    overflow: hidden;
    letter-spacing: 10px;
    user-select: none;

    &:hover {
      text-decoration: none;
      color: #fff;
    }

    &:active {
      box-shadow: 4px 4px 6px 0 rgba(255, 255, 255, .3),
      -4px -4px 6px 0 rgba(116, 125, 136, .2),
      inset -4px -4px 6px 0 rgba(255, 255, 255, .2),
      inset 4px 4px 6px 0 rgba(0, 0, 0, .2);
    }
  }
}
</style>
